<!doctype html>
<html>
	<head>
		<title> Main </title>
    <meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/font-awesome.min.css" />
		<link rel="stylesheet" type="text/css" href="css/main.css" />
	</head>

	<body>
		<div id="paper">

			<div id="linker-handler">
				<i class="icon icon-plus" title="Click to add child element"></i>
				<i class="icon icon-edit"></i>
				<i class="icon icon-step-forward"></i>
				<i class="icon icon-remove"></i>
			</div>

			<div id="linker-detail">
				<div class="pui-growl">
				 <div class="pui-growl-item-container ui-state-highlight ui-corner-all" style="display: block; z-index: 1001;"> 
					<div class="pui-growl-item pui-shadow"> 
					 <span class="pui-growl-image pui-growl-image-info"></span> 
					 <div class="pui-growl-message"> 
						<span class="pui-growl-title"></span> 
						<p class="pui-growl-content"></p> 
					 </div> 
					 <div style="clear: both;"></div> 
					</div>
				 </div>
				</div><!-- /.pui-growl -->
			</div><!-- /#linker-detail -->

		</div>

		<div id="operation">
			<button id="action-reflow">reflow</button>
			<button id="action-resize">resize paper</button>
			<button id="action-save">serialze</button>
			<button id="action-fetch">unserialze</button>
			<button id="action-style">change style</button>
			<button id="action-set-end">set current as end</button>
			<button id="action-clear">clear</button>
		</div>
	</body>

</html>

<script type="text/javascript" src="lib/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="lib/lhgdialog.min.js"></script>
<script type="text/javascript" src="lib/raphael-min.js"></script>
<script type="text/javascript" src="lib/underscore-1.5.1.min.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="linker.js"></script>
<script language="javascript">
	$(function(){
		var r = Raphael('paper', 1200, 800);
		var layoutOpts = {};
		var drawer = new Drawer(r, layoutOpts);

		drawer.create('1', '业绩计算', null, {isBegin: 1});

		drawer.create('2', '品质管理系数', '1');
		drawer.create('3', '综合完成率', '1');


		drawer.create('21', '罗清', '2', {fillColor: '#FF0000'});
		drawer.create('211', '刘琳', '21');

		drawer.create('31', '丁永', '3');

		drawer.create('311', '方浩翔', '31', {fillColor: '#FF0000'});
		drawer.create('312', '陈皓', '31', {fillColor: '#FF0000'});
		drawer.create('313', '刘琳', '31', {fillColor: '#FF0000'});

		window.drawer = drawer;
	});
</script>